<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入jQuery库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>Boost Search</title>
    <style>
        /* 基础重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box; /* 盒模型统一 */
            font-family: 'Segoe UI', system-ui, sans-serif; /* 现代字体栈 */
        }

        /* 页面主体样式 */
        body {
            background: #f8f9fa; /* 浅灰色背景 */
            min-height: 100vh;    /* 最小视口高度 */
            display: flex;
            flex-direction: column;
            transition: padding 0.3s ease; /* 平滑过渡效果 */
        }

        /* 主容器样式 */
        .container {
            max-width: 680px;    /* 最大宽度限制 */
            width: 100%;
            margin: auto;        /* 垂直居中 */
            padding: 20px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* 贝塞尔曲线动画 */
        }

        /* 搜索后的容器状态 */
        .container.searched {
            margin-top: 40px;    /* 上移距离 */
            transform: translateY(0);
        }

        /* 头部样式 */
        .header {
            text-align: center;
            margin-bottom: 40px;
            transition: margin 0.3s ease; /* 过渡动画 */
        }

        /* 主标题 */
        .header h1 {
            font-size: 2.5rem;   /* 大字号 */
            color: #4285f4;      /* Google蓝色 */
            margin-bottom: 8px;
            font-weight: 500;    /* 中等字重 */
            letter-spacing: -1px; /* 字符间距调整 */
        }

        /* 副标题 */
        .header p {
            color: #5f6368;      /* 中灰色 */
            font-size: 1.1rem;
        }

        /* 搜索容器 */
        .search-container {
            margin: 0 auto;     /* 水平居中 */
            max-width: 584px;    /* 与Google相同宽度 */
            transition: all 0.3s ease;
        }

        /* 搜索框样式 */
        .search-input {
            width: 100%;
            height: 46px;
            padding: 0 44px;
            font-size: 1rem;
            border: 1px solid #dfe1e5; /* 浅灰色边框 */
            border-radius: 24px;       /* 圆角 */
            outline: none;
            transition: all 0.2s;
            /* 内置搜索图标 */
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%239aa0a6" d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>') no-repeat 16px center;
            background-size: 20px;
        }

        /* 搜索框聚焦状态 */
        .search-input:focus {
            box-shadow: 0 1px 6px rgba(32,33,36,.28); /* 阴影效果 */
            border-color: rgba(223,225,229,0);       /* 边框透明 */
        }

        /* 搜索按钮 */
        .search-button {
            background: #4285f4;  /* 品牌蓝色 */
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 24px;  /* 圆角匹配输入框 */
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.2s; /* 过渡效果 */
            display: block;
            margin: 20px auto 0;   /* 垂直间距 */
        }

        /* 按钮悬停状态 */
        .search-button:hover {
            background: #2b7de9;    /* 深蓝色 */
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
            transform: translateY(-1px); /* 轻微上移 */
        }

        /* 搜索结果区域 */
        .result {
            margin-top: 32px;
        }

        /* 单个结果项 */
        .item {
            margin-bottom: 28px;
        }

        /* 结果标题链接 */
        .item a {
            color: #1a0dab;        /* 深蓝色 */
            text-decoration: none;
            font-size: 1.25rem;
            line-height: 1.3;
            display: block;
            margin-bottom: 4px;
        }

        /* 链接悬停效果 */
        .item a:hover {
            text-decoration: underline;
        }

        /* 结果描述 */
        .item p {
            color: #4d5156;        /* 深灰色 */
            line-height: 1.58;     /* 优化可读性 */
            font-size: 0.875rem;
            margin: 4px 0;
        }

        /* URL样式 */
        .item .url {
            color: #006621;       /* 绿色 */
            font-size: 0.875rem;
            line-height: 1.3;
        }

        /* 加载状态 */
        .loading {
            text-align: center;
            padding: 40px 0;
            color: #70757a;        /* 中灰色 */
            font-size: 1.1rem;
        }

        /* 无结果提示 */
        .no-results {
            text-align: center;
            padding: 40px 0;
            color: #70757a;
            font-size: 1.1rem;
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            body {
                padding: 24px 16px;
            }
            
            .header h1 {
                font-size: 2rem;  /* 缩小字号 */
            }
            
            .search-input {
                height: 44px;
                padding: 0 40px;
                background-position: 12px center; /* 调整图标位置 */
            }
        }
    </style>
</head>
<body>
    <!-- 页面主体结构 -->
    <div class="container">
        <!-- 头部区域 -->
        <div class="header">
            <h1>Boost Search</h1>
            <p>智能搜索，快速获取信息</p>
        </div>
        
        <!-- 搜索区域 -->
        <div class="search-container">
            <div class="search-box">
                <input type="text" 
                       class="search-input" 
                       placeholder="输入搜索内容..."
                       value="输入搜索内容...">
            </div>
            <button class="search-button" onclick="Search()">搜索</button>
        </div>

        <!-- 结果区域 -->
        <div class="result"></div>
    </div>

    <script>
        // 搜索功能实现
        function Search() {
            const query = $(".search-input").val().trim();
            
            // 空查询检查
            if (!query) {
                alert("请输入搜索内容");
                return;
            }

            // 添加搜索状态类
            $(".container").addClass("searched");
            
            // 显示加载状态
            $(".result").html('<div class="loading">🔍 搜索中...</div>');

            // AJAX请求
            $.ajax({
                type: "GET",
                url: "/s?word=" + encodeURIComponent(query), // 编码查询参数
                success: function(data) {
                    BuildHtml(data);
                    // 滚动到顶部
                    $("html, body").animate({ scrollTop: 0 }, 300);
                },
                error: function() {
                    ShowError("⚠️ 网络请求失败，请稍后重试");
                },
                timeout: 60000 // 60秒超时
            });
        }

        // 构建结果HTML
        function BuildHtml(data) {
            const result = $(".result");
            result.empty();

            // 数据有效性验证
            if (!data || !Array.isArray(data)) {
                ShowError("⚠️ 没有找到相关结果");
                return;
            }

            if (data.length === 0) {
                ShowError("😞 没有找到相关结果");
                return;
            }

            // 动态生成结果项
            data.forEach(item => {
                const resultItem = $('<div class="item"></div>');
                
                resultItem.append(
                    $('<a>', {
                        text: item.title || '无标题',
                        href: item.url || '#',
                        target: "_blank"
                    }),
                    $('<p>', { 
                        text: item.desc || '暂无描述信息' 
                    }),
                    $('<div class="url">').text(item.url || '未知来源')
                );

                result.append(resultItem);
            });
        }

        // 显示错误信息
        function ShowError(message) {
            $(".result").html(
                `<div class="no-results">${message}</div>`
            );
        }

        // 输入框交互处理
        $(function() {
            const $input = $(".search-input");
            
            // 聚焦时清空默认文本
            $input.on('focus', function() {
                if (this.value === this.defaultValue) {
                    this.value = '';
                }
            });
            
            // 失焦时恢复默认文本
            $input.on('blur', function() {
                if (this.value === '') {
                    this.value = this.defaultValue;
                }
            });
            
            // 回车键触发搜索
            $input.on('keypress', function(e) {
                if (e.which === 13) {
                    Search();
                }
            });
        });
    </script>
</body>
</html>

<!-- ------------------------------------------------------------------------------------------------------------------------------ -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <title>boost 搜索引擎</title>
    <style>
        /*去掉网页中的所有的默认内外边距,html的盒子模型*/
        *{
            /*设置外边距*/
            margin: 0; 
            /*设置内边距*/
            padding: 0; 
        }
        /*body内的内容100%和html的呈现吻合*/
        html,
        body{
            height: 100%;
        }
        /*类选择器, .container*/
        .container{
            /* 设置div的宽度 */
            width: 800px;
            /* 通过设置外边距达到居中对齐的目的 */
            margin: 0px auto;
            /* 设置外边距的上边距，保持元素和网页的上部距离 */
            margin-top: 15px;
        }
        /* 复合选择器，选中container下的search */
        .container .search{
            /* 宽度与父标签保持一致 */
            width: 100%;
            /* 高度设置为52px */
            height: 52px;
        }
        /* 选中input标签 */
        /* input在进行高度设置的时候，还需要考虑边框问题 */
        .container .search input{
            /* 设置left浮动 */
            float: left;
            width: 600px;
            height: 50px;
            /* 设置边框的属性:宽度,样式,颜色 */
            border: 1px solid #cccc;
            /* 去掉input输入框的右边框 */
            border-right: none;
            /* 设置内边距，默认文字不要和左侧边框紧挨着 */
            padding-left: 10px;
            /* 设置input内部的字体颜色和样式 */
            color: #000;;
            font-size: 15px;
        }
        .container .search button{
            /* 设置left浮动 */
            float: left;
            width: 120px;
            height: 52px;
            /* 设置button的背景颜色 #4e6ef2 */
            background-color: #4e6ef2;
            /* 设置button中的字体颜色 */
            color: #FFF;
            /* 设置字体的大小 */
            font-size: 19px;
            font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
        }
        .container .result{
            width: 100%;
        }
        .container .result .item{
            margin-top: 15px;
        }
        .container .result .item a{
            /* 设置为块级元素，单独占一行 */
            display: block;
            /* a标签的下划线去掉 */
            text-decoration: none;
            /* 设置a标签中的文字的字体大小 */
            font-size: 20px;
            /* 设置字体的颜色 */
            color: #4e6ef2;
        }
        .container .result .item a:hover{
            /* 设置鼠标放在a之上的效果 */
            text-decoration: underline;
        }
        .container .result .item p{
            margin-top: 5px;
            font-size: 16px;
            font-family:'Courier New', Courier, monospace;
        }
        .container .result .item i{
            /* 设置为块级元素，单独占一行 */
            display: block;
            /* 取消斜体风格 */
            font-style: normal;
            color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="search">
            <input type="text" value="输入搜索关键字..." >
            <button onclick="Search()">搜索一下</button>
        </div>
        <div class="result">
        </div>
    </div>    
    <script>
        function Search(){
            // 是浏览器的一个弹出框 alert("hello js!");
            // 1. 提取数据，$可以理解为Jquery的别称
            let query = $(".container .search input").val();
            console.log("query = " + query); //console是浏览器的对话框，可以用来查看js数据

            //2.发起http请求,ajax属于一个和后端进行数据交互的函数，JQuery中的
            $.ajax({
                type: "GET",
                url: "/s?word=" + query,
                success: function(data){
                    console.log(data);
                    BuildHtml(data);
                }
            });  
        }
        function BuildHtml(data){
            // 获取html中的result标签
            let result_lable = $(".container .result");
            // 清空历史搜索结果
            result_lable.empty();

            for(let elem of data){
                // 调试
                // console.log(elem.title);
                // console.log(elem.url);
                
                let a_lable = $("<a>",{
                    text: elem.title,
                    href: elem.url,
                    // 跳转到新页面
                    target: "_blank"
                });
                let p_lable = $("<p>", {
                    text: elem.desc
                });
                let i_lable = $("<i>", {
                    text: elem.url
                });
                let div_lable = $("<div>", {
                    class: "item"
                })
                a_lable.appendTo(div_lable);
                p_lable.appendTo(div_lable);
                i_lable.appendTo(div_lable);
                div_lable.appendTo(result_lable); 
            }
        }
    </script>
</body>
</html> -->
